<template>
  <pageProductBanner v-if="property.banner" :compInfo="property"/>
  <PageProductIntroduce v-if="property.article1" :article1="property.article1"/>
  <PageIndexCertification v-if="property.certification" :certification="property.certification"/>
  <PageProductFabric v-if="property.article2" :article1="property.article2"/>
  <pageProductDesign v-if="property.article3" :article1="property.article3"/>
  <pageDetailControl ref="controlRef"/>

</template>
<script lang="ts" setup>
type Tseo = {
  headTag: string;
  keyword: string;
  mainKeyword: string;
  meta: string;
};
type Tproper = {
  [k: string]: string | number
}
type Tpage = {
  name: string;
  seoDTO: Tseo;
  property: Tproper;
};
let controlRef = ref();

let property = ref<Tproper>({})
const getPage = async () => {
  const { data } = await useServerFetch<Tpage>("/app-api/promotion/diy-page/getByCode", {
    method: "get",
    query: {
      code: 'process',
    },
  }) as { data: Tpage};;
  property.value = data.property
  controlRef.value.init(1)
  useHead({
    title: data.name,
    meta: [
      {
        hid: data?.seoDTO?.keyword,
        name: data?.seoDTO?.mainKeyword,
        content: data?.seoDTO?.keyword + "," + data?.seoDTO?.meta + "," + data?.seoDTO?.headTag,
      },
    ],
  });
};
onMounted(() => {
  getPage();
});
</script>
